<template>
  <div class="OperatorLogin-a1" v-if="userData">
    <div class="OperatorLogin-head1" style="height: 30px"><img height="30px" src="../assets/img.png" width="500px"></div>
    <div class="OperatorLogin-header">
      <button class="OperatorLogin-close" @click="$router.push('/')">&times;</button>
      <h4 @click="$router.push('/Help')">帮助</h4>
    </div>
    <div class="OperatorLogin-content">
      <h1>{{ userData.phone }}</h1>
      <h6 class="OperatorLogin-h6" v-if="!flag">认证服务由中国移动提供</h6>
      <button class="OperatorLogin-btn OperatorLogin-main-login" @click="loginWithPhone" v-if="!flag">本机号码一键登录</button>
      <button class="OperatorLogin-btn OperatorLogin-other-login" @click="navigateToOtherLogin">其他手机号验证码登录</button>
      <a href="https://login.dingtalk.com/oauth2/auth?redirect_uri=https://5f48-123-113-243-174.ngrok-free.app/auth&response_type=code&client_id=dingcbyedinwxqz9cqkr&scope=openid&state=aaa&prompt=consent" class="OperatorLogin-btn OperatorLogin-other-login">钉钉登陆</a>
      <p class="OperatorLogin-agreement">
        登录则表明同意 <a href="#">用户协议</a> 和 <a href="#">隐私协议</a>
        以及 <a href="#">《中国移动认证服务条款》</a>
      </p>
    </div>
    <div class="OperatorLogin-footer">
      <i class="OperatorLogin-icon OperatorLogin-toutiao"></i>
      <i class="OperatorLogin-icon OperatorLogin-apple"></i>
      <i class="OperatorLogin-icon OperatorLogin-more"></i>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userData: [{phone:''}], // 用于存储用户数据
      flag: false, // 用于判断是否登录成功
    };
  },
  created() {
    this.fetchUserData();
  },
  methods: {
    fetchUserData() {
      this.axios.post(`http://localhost:9000/user/logout/${sessionStorage.getItem("satoken")}`).then(res=>{
       if (res.data.code === 200){
         res.data.data.phone = res.data.data.phone.slice(0, 3) + '****' + res.data.data.phone.slice(-4);
         this.userData = res.data.data
       }else{
         this.flag = true
       }
      })
    },
    loginWithPhone() {
      this.axios.post(`http://localhost:9000/user/loginRedis/${sessionStorage.getItem("satoken")}`).then(res=>{
       sessionStorage.setItem("satoken", res.data.data);
       this.$router.push("/");
     })
    },
    navigateToOtherLogin() {
      this.$router.push("/PhoneLogin");
    }
  }
};
</script>

<style>
.OperatorLogin-a1 {
  margin: 0 500px;
  width: 500px;
  height: 800px;
  background: #ffffff;
}

.OperatorLogin-header {
  display: flex;
  justify-content: space-between;
  //padding: 10px;
}

.OperatorLogin-close {
  background: none;
  border: none;
  font-size: 50px;
}

.OperatorLogin-content h2 {
  font-size: 24px;
  margin: 10px 0;
}

.OperatorLogin-btn {
  display: block;
  width: 80%;
  margin: 10px auto;
  padding: 10px;
  font-size: 16px;
}

.OperatorLogin-main-login {
  margin-top: 70px;
  background-color: #666;
  color: white;
}

.OperatorLogin-other-login {
  background-color: white;
  color: black;
  border: 1px solid #666;
}

.OperatorLogin-agreement {
  margin: 20px 60px;
  font-size: 12px;
}

.OperatorLogin-icon {
  font-size: 24px;
  margin: 0 5px;
}

</style>
